<template>
  <div class="home">
    <div class="box" ref="box1"></div>
    <div class="box" ref="box2">艾鹏飞</div>
    <div class="box" ref="box3">202003020101</div>
    <div class="box" ref="box4">软件20-1班</div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getCurrentInstance, onMounted, reactive } from 'vue'
export default {
  name: 'HomePage',
  // mounted(){
  // console.log(this.$refs.box)
  // },
  setup() {
    //定义数据
    let data = reactive({
      //定义图表对象
      myChart: {},
    })
    //获取当前实例
    let $this = getCurrentInstance()
    // console.log($this);
    // console.log($this.refs.box);
    //页面挂载完成
    onMounted(() => {
      console.log($this.refs.box)
      //基于准备好的dom,初始化echarts实例
      data.myChart = echarts.init($this.refs.box1)
      //绘制图表
      data.myChart.setOption({
        title: {
          text: 'ECharts 入门示例',
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      })
    })
  },
}
</script>

<style>
.home {
  width: 100%;
  height: 100%;
  /* border: 1px solid blue; */
  display: flex;
  /* 换行 */
  flex-wrap: wrap;
  /* //空隙 */
  justify-content: space-between;
  align-content: space-between;
}
.box {
  width: 49%;
  height: 49%;
  border: 1px solid rgb(104, 101, 101);
}
</style>
